<script setup lang="ts">

import router from "@/router";
import {ref} from "vue";
import {getInfo, reviseInfo} from "@/api/home/login/login";
import {ElMessage} from "element-plus";
const textarea = ref('')
let user = JSON.parse(localStorage.getItem('userInformation'))
textarea.value = user.nickname

let information = JSON.parse(localStorage.getItem('userInformation'))
function areYouSure() {
    information.nickname = textarea.value
    reviseInfo(information).then(res=>{
        if (res.code == 200) {
            ElMessage({
                message: '修改成功',
                type: 'success',
            })
            router.go(-1)
        }
    })
    getInfo().then(info=>{
        console.log(info)
        if (info.code == 200) {
            console.log('123')
            localStorage.setItem('userInformation',JSON.stringify(information))
        }
    })
}

</script>

<template>
<!--修改昵称-->
    <div class="box">
        <div class="titTime" @click="router.go(-1)">
            <van-icon name="arrow-left"/>
            <span class="titleText">修改昵称</span>
        </div>
        <div class="substance">
            <el-input
                v-model="textarea"
                maxlength="20"
                :rows="4"
                style="width: 100%"
                placeholder="请您写下想要更改的名称"
                show-word-limit
                type="textarea"
                class="inputText"
                :model-value="textarea"
            />
        </div>
        <div class="uploadBtn">
            <el-button style="width: 50vw" type="primary" @click="areYouSure">确认修改</el-button>
        </div>
    </div>
</template>

<style scoped>
* {
    margin: 0;
    padding: 0;
}

.box {
    padding: 8% 6%;

    .titTime {
        margin-bottom: 5%;
        font-size: 5vw;
    }
}

.substance {
    margin-top: 3%;
    padding: 0 5%;
    width: 100%;
    height: 100%;
}

.uploadBtn {
    margin: 8% auto;
    padding: 0 20%;
}
</style>